import React from "react";
import { Chart, Geom, Axis, Tooltip } from "bizcharts";

export default class Bar extends React.Component {
  render() {
    const data = [
      {
        year: "1月",
        已处理警告: 38,
      },
      {
        year: "2月",
        已处理警告: 52,
      },
      {
        year: "3月",
        已处理警告: 61,
      },
      {
        year: "4月",
        已处理警告: 145,
      },
      {
        year: "5月",
        已处理警告: 48,
      },
      {
        year: "6月",
        已处理警告: 38,
      },
      {
        year: "7月",
        已处理警告: 28,
      },
      {
        year: "8月",
        已处理警告: 38,
      },
      {
        year: "9月",
        已处理警告: 68,
      },
      {
        year: "10月",
        已处理警告: 38,
      },
      {
        year: "11月",
        已处理警告: 58,
      },
      {
        year: "12月",
        已处理警告: 38,
      },
    ];
    const cols = {
      已处理警告: {
        tickInterval: 20,
      },
    };
    return (
      <div style={{ width: "100%", marginLeft: -30 }}>
        <Chart height={338} data={data} scale={cols} forceFit>
          <Axis name="year" />
          <Axis name="已处理警告" />
          <Tooltip
            crosshairs={{
              type: "y",
            }}
          />
          <Geom type="interval" position="year*已处理警告" />
        </Chart>
      </div>
    );
  }
}
